

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 后台管理员</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
              <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input" id="username">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
        </div>
        
        <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>

        <script type="text/html" id="buttonTpl">
          {{#  if(d.check == true){ }}
            <button class="layui-btn layui-btn-xs">已审核</button>
          {{#  } else { }}
            <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
          {{#  } }}
        </script>
        <script type="text/html" id="table-useradmin-admin">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          {{#  if(d.role == '超级管理员'){ }}
            <a class="layui-btn layui-btn-disabled layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>
          {{#  } else { }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
          {{#  } }}
        </script>
      </div>


    </div>
  </div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/comm.js"></script>
<script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'useradmin', 'table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;

    //方法级渲染
    table.render({
      elem: '#LAY-user-back-manage'
      ,url: '/user/findData.do'
      ,cols: [
        [
          {checkbox: true, fixed: true}
          ,{field:'username', title: '用户名'}
          ,{field:'email', title: '邮箱'}
          ,{field:'name', title: '真实名称'}
          ,{field:'phone', title: '手机号'}
          ,{field:'address', title: '地址'}
          ,{templet:'<div>{{d.roles[0].rolename}}</div>', title: '角色名称'}
          ,{field:'ops', title:'操作',templet: '#table-useradmin-admin',width: 146}
        ]
      ]
      ,id: 'testReload'
      ,page: true
      ,height:'full-110'
    });

    //监听搜索
    form.on('submit(LAY-user-back-search)', function(data){
      var field = data.field;
      //执行重载
      //执行重载(这里reload后面的ID是render后面的ID)
      table.reload('testReload', {
        where: {
          username: $("#username").val()
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    });
  
    //事件
    var active = {
      batchdel: function(){
        alert(111);
        var checkStatus = table.checkStatus('LAY-user-back-manage');
        alert(checkStatus.data);return false
        alert(checkData.length);
        if(checkData.length === 0){
          return layer.msg('请选择数据');
        }
        
        layer.prompt({
          formType: 1
          ,title: '敏感操作，请验证口令'
        }, function(value, index){
          layer.close(index);
          
          layer.confirm('确定删除吗？', function(index) {
            
            //执行 Ajax 后重载
            /*
            admin.req({
              url: 'xxx'
              //,……
            });
            */
            table.reload('LAY-user-back-manage');
            layer.msg('已删除');
          });
        }); 
      }
      ,add: function(){
        layer.open({
          //跳转页面是个隐藏div的时候用type=1，若是个地址的时候type=2
          type: 1
          ,title: '添加用户'
          ,content: $("#addUser")
          ,area : 'auto'
          ,success: function(){
            // 去获取所有的角色信息
            ajax('/role/getAllRole.do',null,'POST',null).done(function(resp) {
              // 成功回调
              // 先清空掉上传的select下拉框的数据
              $("#addRoles").initSelect(resp.data,'id','rolename',null,'addRoles')
            }).fail(function(err) {
              // 失败回调
              layer.msg("数据异常!" + errorMsg, {icon: 5});
              location.reload();
            });
          }
          ,cancel : function() {
            // 你点击右上角 X 取消后要做什么
                $("#addUser")[0].reset();
                layui.form.render();
          }
          // 这里不删除作为以后参考
          /*,yes: function(index, layero){
            //监听提交
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'LAY-user-front-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);
            iframeWindow.layui.form.on('submit('+ submitID +')',function(data){
              var field = data.field; //获取提交的字段
              //提交 Ajax 成功后，静态更新表格中的数据

            });

            submit.trigger('click');
          }*/
        });
        // 监听提交按钮
        form.on('submit(addBtn)',function (data) {
          var roles = [];
          var role = {
            id:$("#addRoles").val()
          }
          roles.push(role);
          var user = data.field;
          user.roles = roles;
          // 向数据库添加数据
          ajax('/user/add.do',JSON.stringify(user),'POST','application/json;charset=UTF-8').done(function(resp) {
            // 成功回调
            if (resp.ret){
              //执行重载
              success("添加成功")
            }else{
              failorerror(resp.msg)
            }
          }).fail(function(err) {
            // 失败回调
            failorerror("数据异常!" )
          });
          return false;
        })
      }
    }
    // 监听行工具事件使用该事件的时候要将按钮那里添加lay-event="edit",lay-event="del"
    table.on('tool(LAY-user-back-manage)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('真的删除吗！', function (index) {
          //异步像服务器发送删除请求
          ajax('/user/del.do',{'id': data.id},'POST',null).done(function(resp) {
            // 成功回调
            if (resp.ret) {
              layer.msg("删除成功!", {icon: 6});
              obj.del();
              layer.close(index);
            } else {
              failorerror(resp.msg)
            }
          }).fail(function(err) {
            // 失败回调
            failorerror("数据异常!" )
          });
        });
        //更新用户
      } else if (obj.event == 'edit') {
        layer.open({
          type: 1,
          title: "更新用户",
          area: 'auto',
          content: $("#updateUser"),
          success: function () {
            ajax('/role/getAllRole.do',null,'POST',null).done(function(resp) {
              // 成功回调
              if (resp.ret) {
                $("#updateRoles").initSelect(resp.data,'id','rolename',data.roles[0].id,'updateRoles')
              } else {
                failorerror(resp.msg)
              }
            }).fail(function(err) {
              // 失败回调
              failorerror("数据异常!" )
            });
            //回显数据
            $("#updateUser").find($("input[name='username']")).val(data.username);
            $("#updateUser").find($("input[name='name']")).val(data.name);
            $("#updateUser").find($("input[name='email']")).val(data.email);
            $("#updateUser").find($("input[name='phone']")).val(data.phone);
            $("#updateUser").find($("input[name='address']")).val(data.address);
          }
        });
        updateData(data);
      }
    });


    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    function updateData(obj){
      form.on('submit(updateBtn)',function(data){
        var roles = [];
        var role = {
          id:$("#updateRoles").val()
        }
        roles.push(role);
        var user = {
          id:obj.id,
          username:data.field.username,
          name:data.field.name,
          phone:data.field.phone,
          email:data.field.email,
          address:data.field.address,
          roles:roles,
        }
        ajax('/user/update.do',JSON.stringify(user),'POST','application/json;charset=UTF-8').done(function(resp) {
          // 成功回调
          if (resp.ret) {
            success("修改成功",1000);
          } else {
            failorerror(resp.msg)
          }
        }).fail(function(err) {
          // 失败回调
          failorerror("数据异常!" )
        });
        // 该return false必须加，因为已经有ajax表单提交了，所以form表单不能提交
        return false;
      });
    }
  });
</script>
</body>
<!-- 新增隐藏模块 -->
  <form class="layui-form" lay-filter="layuiadmin-form-admin" id="addUser" style="padding: 20px 30px 0 0;display: none">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">真实名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" lay-verify="required" placeholder="请输入真实名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">手机</label>
      <div class="layui-input-inline">
        <input type="text" name="phone"  placeholder="请输入号码" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">地址</label>
      <div class="layui-input-inline">
        <input type="text" name="address" lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-inline">
        <select id="addRoles">

        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="addBtn">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
<!--修改隐藏模块-->
  <form class="layui-form" lay-filter="layuiadmin-form-admin"  id="updateUser" style="padding: 20px 30px 0 0;display: none">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">真实名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" lay-verify="required" placeholder="请输入真实名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">手机</label>
      <div class="layui-input-inline">
        <input type="text" name="phone"  placeholder="请输入号码" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">地址</label>
      <div class="layui-input-inline">
        <input type="text" name="address" lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-inline">
        <select id="updateRoles">

        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="updateBtn">确认修改</button><button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</html>

